<template>
  <div>
    <div>
      <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in images" :key="image">
          <van-image
            :src="image"
            radius="20px"
            style="height: 15vh; width: 95vw"
          />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div>
      <div
        style="
          text-align: left;
          width: 95vw;
          margin: 10px auto;
          color: #888;
          font-size: 14px;
        "
      >
        你可能喜欢
      </div>
      <div style="display: flex; overflow: auto">
        <div style="margin-left: 5vw" v-for="item in 8">
          <div>
            <van-image
              round
              width="4rem"
              height="4rem"
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
            />
          </div>
          <div>hvbjhv</div>
        </div>
      </div>
    </div>
    <div>
      <div
        style="
          text-align: left;
          width: 95vw;
          margin: 20px auto;
          color: #888;
          font-size: 14px;
        "
      >
        新商家
      </div>
      <div style="display: flex; overflow: auto">
        <div style="margin-left: 5vw" v-for="item in 6">
          <div>
            <van-image
              round
              width="4rem"
              height="4rem"
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
            />
          </div>
          <div>hvbjhv</div>
        </div>
      </div>
    </div>
    <div
      style="
        width: 95vw;
        height: 5vh;
        line-height: 5vh;
        display: flex;
        margin: 3vh auto;
        position:sticky;
      "
    >
      <div style="font-size: 20px; width: 30vw"><b>全部商家</b></div>

      <div style="display: flex; width: 40vw; margin-left: 35vw">
        <div style="font-size: 12px; color: #888">综合排序</div>
        <div style="margin-left: 5vw; font-size: 14px">A-Z排序</div>
      </div>
    </div>
    <div>
      <div style="text-align: left">
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
const active = ref(0);
const images = [
  "https://t7.baidu.com/it/u=3006554535,1590294547&fm=193&f=GIF",
  "https://t7.baidu.com/it/u=2462227045,3855965534&fm=193&f=GIF",
  "https://t7.baidu.com/it/u=4066387394,2691309199&fm=193&f=GIF",
  "https://t7.baidu.com/it/u=179992138,1273074796&fm=193&f=GIF",
  "https://t7.baidu.com/it/u=2482536312,3790393383&fm=193&f=GIF",
];
</script>
<style lang="scss" scoped></style>
